<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>其他伪类(other pseudo class)</title>
  <!-- 
    HTML中的其他伪类（Other Pseudo-classes）是一种CSS选择器，用于根据元素的状态或属性来选择元素。以下是一些常见的其他伪类及其说明： 
 
      1. :hover  伪类(":"前不留空格)：选择鼠标悬停在元素上时的状态。
          例如： a:hover { color: red; }  可以选择鼠标悬停在链接上时设置文字颜色为红色。 
      2. :focus  伪类(":"前不留空格)：选择获取焦点的元素状态，通常用于表单元素。
          例如： input:focus { background-color: lightblue; }  可以选择输入框获取焦点时设置背景颜色为浅蓝色。 
      3. :active  伪类(":"前不留空格)：选择被激活（点击）的元素状态。例如： button:active { background-color: gray; }  可以选择按钮被点击时设置背景颜色为灰色。 
      4. :checked  伪类(":"前不留空格)：选择被选中的表单元素，通常用于单选框和复选框。
          例如： input[type="checkbox"]:checked { border-color: green; }  可以选择被选中的复选框并设置边框颜色为绿色。 
      5. :disabled  伪类(":"前不留空格)：选择被禁用的表单元素。例如： input:disabled { opacity: 0.5; }  可以选择被禁用的输入框并设置不透明度为0.5。 
      6. :only-child  伪类：选择仅有一个子元素的父元素。
          例如， div:only-child { background-color: lightblue; }  可以选择只有一个子元素的  <div>  元素并设置背景颜色为浅蓝色。 
      7. :only-of-type  伪类(":"前留空格)：选择同类型元素中仅有一个的元素。
          例如， p:only-of-type { font-weight: bold; }  可以选择同级别的  <p>  元素中仅有一个的元素并设置字体加粗。 
      8. :root  伪类：选择文档的根元素，即  <html>  元素。通常用于设置全局样式。
          例如， :root { font-size: 16px; }  可以设置文档中所有元素的默认字体大小为 16 像素。 
      9. :empty  伪类：选择没有子元素的元素或没有文本内容的元素。
          例如， p:empty { display: none; }  可以选择没有内容的  <p>  元素并隐藏该元素。 
   -->
   <style>
     /* :only-child - 父元素仅有一个子元素, 才生效 */
     .only-child :only-child {
       font-weight: bold;
       color: slateblue;
     }

     /* :only-of-type - 父元素仅有一个同类型子元素, 才生效 */
     .only-of-child :only-of-type {
       font-weight: bold;
       color: green;
     }

     /* :root - 选择文档的根元素，即  <html>  元素 */
     :root {
       font-size: 26px;
     }

     /* :empty - 选择没有子元素的元素或没有文本内容的元素 */
     :empty {
       width: 80px;
       height: 80px;
       background-color: lightgray;
     }
   </style>
</head>
<body>

  <div class="only-child">
    <span>only-child-span</span>
  </div>
  <div class="only-child">
    <span>only-child-span01</span>
    <div>only-child-div01</div>
    <div>only-child-div02</div>
  </div>

  <div>---------------------------------</div>

  <div class="only-of-child">
    <span>only-child-span</span>
    <div>only-of-child-div</div>
    <p>only-of-child-p</p>
  </div>

  <div class="only-of-child">
    <span>only-of-child-span01</span>
    <div>only-of-child-div01</div>
    <div>only-of-child-div02</div>
    <span>only-of-child-span02</span>
  </div>
  <div>---------------------------------</div>

  <div class="empty">empty-content</div>

  <div class="empty"></div>
  
</body>
</html>